<template>
  <div>
    <el-container>
      <el-main>
        <el-container class="parent-body">
          <el-header class="content-header">
            <i class="el-icon-s-unfold"></i>
            数据列表
            <div class="rightTop">
              <el-button @click="Add">添加</el-button>
            </div>
          </el-header>
          <el-main class="info-main padding-style">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="id" label="编号">
                <template slot-scope="scope">{{ scope.row.id}}</template>
              </el-table-column>
              <el-table-column prop="seckillName" label="秒杀时段名称">
                <template slot-scope="scope">{{ scope.row.seckillName}}</template>
              </el-table-column>
              <el-table-column prop="startTime" label="每日开始时间">
                <template slot-scope="scope">{{ scope.row.startTime}}</template>
              </el-table-column>
              <el-table-column prop="endTime" label="每日结束时间">
                <template slot-scope="scope">{{ scope.row.endTime}}</template>
              </el-table-column>
              <el-table-column label="启用" width="100">
                <template slot-scope="scope">
                  <el-switch v-model="scope.row.seckillType" :active-value="1" :inactive-value="0"></el-switch>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template slot-scope="scope">
                  <el-button size="mini" @click="update(scope.$index, scope.row)" type="text">编辑</el-button>
                  <el-button size="mini" @click="deleteOne(scope.$index, scope.row)" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-main>
        </el-container>
      </el-main>
    </el-container>
    <div>
      <el-dialog
        title="添加时间段"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
      >
        <el-form :model="form" :rules="rules" ref="form" label-width="200px">
          <el-form-item label="秒杀时段名称：" prop="seckillName">
            <el-input v-model="form.seckillName"></el-input>
          </el-form-item>
          <el-form-item label="每日开始时间：">
            <div class="dateCss">
              <el-time-picker
                v-model="form.startTime"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
                align="center"
                type="time"
                placeholder="选择时间"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
              ></el-time-picker>
            </div>
          </el-form-item>
          <el-form-item label="每日结束时间：">
            <div class="dateCss">
              <el-time-picker
                v-model="form.endTime"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
                align="left"
                type="time"
                placeholder="选择时间"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
              ></el-time-picker>
            </div>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="form.seckillType" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="reforme">取消</el-button>
            <el-button type="primary" @click="confirm(form)">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <div>
      <el-dialog
        title="修改时间段"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible1"
      >
        <el-form :model="form1" :rules="rules" ref="form" label-width="200px">
          <el-form-item label="秒杀时段名称：" prop="secondsKillName">
            <el-input v-model="form1.seckillName"></el-input>
          </el-form-item>
          <el-form-item label="每日开始时间：">
            <div class="dateCss">
              <el-time-picker
                v-model="form1.startTime"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
                align="center"
                type="time"
                placeholder="选择时间"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
              ></el-time-picker>
            </div>
          </el-form-item>
          <el-form-item label="每日结束时间：">
            <div class="dateCss">
              <el-time-picker
                v-model="form1.endTime"
                value-format="HH:mm:ss"
                format="HH:mm:ss"
                align="left"
                type="time"
                placeholder="选择时间"
                :picker-options="{
                  selectableRange: '00:00:00 - 23:59:59'
                }"
              ></el-time-picker>
            </div>
          </el-form-item>
          <el-form-item label="是否启用">
            <el-switch v-model="form1.seckillType" :active-value="1" :inactive-value="0"></el-switch>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="dialogVisible1 = false">取消</el-button>
            <el-button type="primary" @click="confirms(form)">确定</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import seckillListApi from "@/api/operate/seckillTime";
export default {
  data() {
    return {
      //弹出框
      form:{
        id:"",
        seckillName:"",
        startTime:new Date(),
        endTime:new Date(),
        seckillType:""
      },

      form1:{
        id:"",
        seckillName:"",
        startTime:new Date(),
        endTime:new Date(),
        seckillType:""
      },

      // pickerOptions: {
      //   disabledDate(time) {
      //     return time.getTime() > Date.now();
      //   },
      //   shortcuts: [
      //     {
      //       text: "今天",
      //       onClick(picker) {
      //         picker.$emit("pick", new Date());
      //       }
      //     },
      //     {
      //       text: "昨天",
      //       onClick(picker) {
      //         const date = new Date();
      //         date.setTime(date.getTime() - 3600 * 1000 * 24);
      //         picker.$emit("pick", date);
      //       }
      //     },
      //     {
      //       text: "一周前",
      //       onClick(picker) {
      //         const date = new Date();
      //         date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
      //         picker.$emit("pick", date);
      //       }
      //     }
      //   ]
      // },
      dialogVisible: false,
      dialogVisible1: false,
      tableData: [],
      rules: {
        seckillName: [
          { required: true, message: "请输入秒杀时间段名称", trigger: "blur" },
          { min: 4, max: 5, message: "长度在 4 到 5 个字符", trigger: "blur" }
        ],
        startTime: [{}],
        endTime: [{}]
      },
      
    };
  },
  methods: {
    // init(id) {
    //   this.form.id = id || 0;
    //   this.dialogVisible = true;
    //   this.$nextTick(() => {});
    // },
    // startTimeToTime(row,column){
    //   var date=new Date(row.startTime)
    //   var h=date.getHours()+':'
    //   var m=date.getMinutes()+':'
    //   var s=date.getSeconds()
    //   return h+m+s
    // },
    // endTimeToTime(row,column){
    //   var date=new Date(row.endTime)
    //   var h=date.getHours()+':'
    //   var m=date.getMinutes()+':'
    //   var s=date.getSeconds()
    //   return h+m+s
    // },

    // parseTime(str){
    //   if ((str + "").indexOf("-") != -1) {
    //     str = str.replace(new RegExp(/-/gm), "/");
    //   }
    //   let d=new Date(parseInt(str));
    //   let h=d.getHours() <10 ? '0' + d.getHours() + ':':d.getHours() + ':';
    //   let m=d.getMinutes() <10 ? '0' + d.getMinutes() + ':':d.getMinutes() + ':';
    //   let s=d.getSeconds() <10 ? '0' + d.getSeconds() : d.getSeconds();
    //   return h+m+s;
    // },

    // parseTime1(str){
    //   if ((str + "").indexOf("-") != -1) {
    //     str = str.replace(new RegExp(/-/gm), "/");
    //   }
    //   let d=new Date(parseInt(str) * 1000);
    //   let h=d.getHours() <10 ? '0' + d.getHours() + ':':d.getHours() + ':';
    //   let m=d.getMinutes() <10 ? '0' + d.getMinutes() + ':':d.getMinutes() + ':';
    //   let s=d.getSeconds() <10 ? '0' + d.getSeconds() : d.getSeconds();
    //   return h+m+s;
    // },

    //添加保存
    confirm(from) {
        var dto={"seckillName":this.form.seckillName,"startTime":this.form.startTime,"endTime":this.form.endTime,"seckillType":this.form.seckillType}
        console.log(this.form)
      seckillListApi.getSaveList(dto).then(Response =>{
        console.log(dto)
        const res=Response.data;
        console.log(Response);
        if(res.code==200){
          this.dialogVisible = false;
          this.inData();
        }else{
          this.$message({
            message:res.message,
            type:"warning"
          });
        }
      })
    },

    //编辑修改
    confirms(form1) {
      console.log(this.form1)
      var dto={"id":this.form1.id,"seckillName":this.form1.seckillName,"startTime":this.form1.startTime,"endTime":this.form1.endTime,"seckillType":this.form1.seckillType}
      console.log(dto)
      seckillListApi.getUpdateList(dto).then(Response =>{
        const reas=Response.data;
        console.log(Response);
        if(reas.code==200){
          this.dialogVisible1 = false;
          this.inData();
        }else{
          this.$message({
            message:reas.message,
            type:"warning"
          });
        }
      })
    },

    //软删除
    deleteOne(index, row){
      var id = row.id;
      console.log(id)
      this.$confirm("确认删除" , "提示", {
        type: "warning"
      }).then(() => {
        seckillListApi.getDeletesList(id).then(Response =>{
          const rea=Response.data;
        console.log(Response);
        if(rea.code==200){
          this.inData();
        }else{
          this.$message({
            message:rea.message,
            type:"warning"
          });
        }
        })
      });
    },

    Add() {
      this.dialogVisible = true;
    },

    update(index, row) {
      this.form1.id=row.id;
      this.form1.seckillName=row.seckillName;
      this.form1.startTime=row.startTime;
      console.log(this.form1.startTime)
      this.form1.endTime=row.endTime;
      this.form1.seckillType=row.seckillType;
      this.dialogVisible1 = true;
      
    },

    reforme(){
      this.form.seckillName=null;
      this.form.startTime=null;
      this.form.endTime=null;
      this.form.seckillType=null;
      this.dialogVisible=false;
    },

    inData(){
      seckillListApi.getFindTimeList().then(Response=>{
        console.log(Response)
        this.tableData = Response.data.data
      })
    },
  },
  mounted(){
    this.inData();
  }
};
</script>
<style scoped>
.rightTop {
  float: right;
}
.fontColor {
  color: grey;
}
</style>
